import ModalComponent from '@/components/antd-comp/modal/ModalComponent'
import { Empty, Radio } from 'antd'
import { useTranslation } from 'react-i18next'
import '../css/version.less'

/* 
  recordList    数据
  RecordPage    分页   fun
  recordPage    分页数据
  closeFun      关闭   fun
  handleVersion 查看   fun
  radioType     显示   radio
  RadioChang    radio fun
*/
const Edition = ({
  recordList,
  RecordPage,
  recordPage,
  closeFun,
  handleVersion,
  radioType = true,
  RadioChang,
  ...props
}) => {
  const { t } = useTranslation()
  return (
    <ModalComponent
      title={t('tools.edition')}
      width={700}
      content={
        recordList && recordList.length > 0 ? (
          <div className="flexCol borderCase">
            {/* header */}
            <div className="bord_head flexRowStart">
              {radioType ? null : <span className="flexRowStart settCasemin" style={{ width: '6%' }}></span>}
              <span className={radioType ? 'flexRowStart settCasemin' : 'flexRowStart settCaseminRad'}>
                {t('tools.tab_ver')}
              </span>
              <span className="flexRowStart settCasemax">{t('updateTime')}</span>
              <span className="flexRowStart settCasemax">{t('tools.tab_edition')}</span>
              <span className={radioType ? 'flexRowStart settCasemin' : 'flexRowStart settCaseminRad'}>
                {t('operations')}
              </span>
            </div>
            {/* cont */}
            <div className="contHei caseOverFlowY">
              {recordList.map(record => {
                return (
                  <div className="bord_cont flexRowStart" key={record.id}>
                    {radioType ? null : (
                      <span style={{ width: '6%' }} className="allSize">
                        <Radio
                          checked={RecordPage.version === record.label}
                          onChange={e => {
                            RadioChang(record)
                          }}
                          style={{ width: '18px', height: '18px' }}
                        ></Radio>
                      </span>
                    )}
                    <span className={radioType ? 'settCasemin allSize' : 'settCaseminRad allSize'}>{record.label}</span>
                    <span className="settCasemax allSize"> {record.update_time.replace('T', ' ')}</span>
                    <span className="settCasemax allSize">{record.user_name}</span>
                    <span
                      className={
                        radioType
                          ? 'settCasemin setting_see flexRowStart allSize'
                          : 'setting_see settCaseminRad flexRowStart allSize'
                      }
                      onClick={() => handleVersion(record)}
                    >
                      <div className="cursonCase">查看</div>
                    </span>
                  </div>
                )
              })}
            </div>
            {/* fouter */}
            {/* <div className="bord_fout">
              <Pagination
                onChange={e => recordPage(e)}
                align="end"
                showSizeChanger={false}
                defaultCurrent={RecordPage.pageNum}
                total={RecordPage.total}
              />
            </div> */}
          </div>
        ) : (
          <Empty description={t('empty')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )
      }
      okText=""
      cancelText=""
      onCancel={() => {
        closeFun()
      }}
      footer={[]}
      onOk={() => {
        console.log('onOk')
      }}
      {...props}
    />
  )
}

export default Edition
